<template>
  <div class="parent">
    <h2>父组件</h2>
    <input type="text" :value="motherName" @input="inpChange" placeholder="母亲" key="mother">
    <h2>{{ son1WifeName }}</h2>
    <hr>
    <son1 :mother='motherName' @son1InpChange="son1InpChange"></son1>
    <hr>
    <son2 :mother='motherName'></son2>
  </div>
</template>

<script>
import son1 from '@/components/Son1.vue'
import son2 from '@/components/Son2.vue'
export default {
  components: {
    son1,
    son2
  },
  data () {
    return {
      motherName: '',
      son1WifeName: '大儿媳妇姓名'
    }
  },
  methods: {
    inpChange (e) {
      this.motherName = e.target.value
    },
    son1InpChange (val) {
      this.son1WifeName = val
    }
  }
}
</script>

<style lang="less">
.parent {
  input {
    padding: 5px;
    margin: 2px;
  }
}
</style>
